<template>
    <div>
        <p class="title">{{ title }}</p>
        <p class="number">{{total}}</p>
        <section class="chart">
            <slot name="chart">
                
            </slot>
        </section>
        <p class="line"></p>
        <div class="footer">
            <slot>默认插槽</slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: String,
        total: [String,Number],
    }
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 12px;
    color: #bbb;
}

.number {
    font-size: 25px;
    margin-top: 5px;
}

.chart {
    height: 50px;
    p:nth-child(1){
        // background-color: red;
        display: flex;
        align-items: center;
        .triangle {
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-bottom-color: red;
        }
    }
    p:nth-child(2){
        // background-color: red;
        display: flex;
        align-items: center;
        .triangle {
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-top-color: green;
        }
    }
}

.line {
    height: 0;
    border-bottom: 1px solid #ddd;
    margin-top: 8px;
}

.footer {
    margin-top: 10px;

    span {
        font-size: 14px;
    }

    span:nth-child(1) {
        color: #bbb;
    }
}
</style>